<template lang='pug'>
.header
    .menu
        .menu_title(v-for="itm,idx in menus")
            .menu_icon
                img(:src="itm.icon")
            .menu_name(@click="jump(itm)") {{itm.nam}}
</template>

<script>

export default {
    name: 'demo',
    components:{
       
    },
    data() {
        return {
           menus:[
                {icon:'',nam:'平台中心',to:'main'},
                {icon:'',nam:'能效管理',to:'energy'},
                {icon:'',nam:'检测管理',to:'quatest'},
                {icon:'',nam:'基础信息',to:'energy'},
                {icon:'',nam:'报表管理',to:'energy'},
                {icon:'',nam:'系统设置',to:'energy'}
            ]
        }
    },

    mounted () {
       
          
    },
    methods:{
        init(){
           
        },
        jump(itm){
           this.$route.push({name:itm.to})
        }
    }
}
</script>

<style lang="scss" scoped>
.header{
    position:fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
    height: 100px;
    .menu{
        position:absolute;
        top: 40px;
        width: 1000px;
        left: calc(50% - 500px);
        border: 1px solid red;
        height: 50px;
        display: flex;
        justify-content: space-between;
        .menu_title{
            display: flex;
            .menu_icon{

            }
            .menu_name{

            }
        }
    }
}
</style>